<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>V视界-个人页面</title>
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/common.css}" href="../css/common.css" />
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/iconfont01.css}" href="../css/iconfont01.css" />
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/personalPage.css}" href="../css/personalPage.css">
    <link rel="stylesheet" type="text/css" th:href="@{/static/customAlertConfirm/customAlertConfirm.css}"
          href="../customAlertConfirm/customAlertConfirm.css">
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/personalPage-infoChange.css}"
          href="../css/personalPage-infoChange.css">
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/publishBlog.css}" >
</head>

<body>
<div class="top" th:fragment="top">
    <div id="top">
        <!-- logo -->
        <div id="logo-search">
            <div class="logo">
                <img src="../img/logo.png" th:src="@{/static/img/logo.jpg}" alt="" />
            </div>
            <div class="top-search" th:replace="~{home::topSearch}">
                <span><i class="iconfont">&#xe623;</i></span>
                <input type="text" placeholder="请输入搜索内容" id="top-input" />
            </div>
        </div>

        <!-- 各种功能 -->
        <div id="fn" th:replace="~{personalPage::#fn}">
            <div class="home  fn">
                <a class="icon" href="home.html" th:href="@{/blog/getMyConnectionBlog(msg='登录成功')}"
                ><i class="iconfont">&#xe625;</i></a
                >
            </div>
            <div class="hot fn">
                <a class="icon" href="hot.html" th:href="@{/blog/getIndexBlog(state=2)}"
                ><i class="iconfont">&#xe628;</i></a
                >
            </div>
            <div class="message fn">
                <a class="icon" href="message.html" th:href="@{/message}"
                ><i class="iconfont">&#xe908;</i></a
                >
            </div>
            <div class="private border fn">
                <a class="icon" href="personalPage.html" th:href="@{/my/toMyInfo}"
                ><i class="iconfont">&#xe60a;</i></a
                >
            </div>
        </div>
        <!-- 登录，设置等-->
        <div class="access" th:replace="home::access">
        </div>
    </div>
</div>
<div id="content">
    <div class="list">
        <ul>
            <a th:href="@{/my/toMyInfo}">
                <span><i class="iconfont">&#xe7c6;</i></span>
                我的主页
            </a>
            <a th:href="@{/my/toMyIdols}">
                <span><i class="iconfont">&#xe65d;</i></span>
                我的关注
            </a>
            <a th:href="@{/my/toMyFans}">
                <span><i class="iconfont">&#xe648;</i></span>
                我的粉丝
            </a>
            <a th:href="@{/my/toMyLike}">
                <span><i class="iconfont">&#xe694;</i></span>
                我的点赞
            </a>
            <a th:href="@{/my/toMyCollection}">
                <span><i class="iconfont">&#xe647;</i></span>
                我的收藏
            </a>
            <a class="color" th:href="@{/my/echoMyMessage}">
                <span><i class="iconfont">&#xe626;</i></span>
                修改信息
            </a>
            <a th:href="@{/personalPage-pswdChange}">
                <span><i class="iconfont">&#xe64b;</i></span>
                修改密码
            </a>
        </ul>
    </div>
    <div id="news" style="height: 600px;">
        <div class="infoChangeBox">
            <form class="infoChangeForm" th:action="@{/my/toSetUpMyInfo}" th:method="post" enctype="multipart/form-data">
                <img th:src="@{${user.avatarUrl}}" id="showImg" style="width: 60px;height: 60px;border-radius: 50%;">
                <div>
                    <input type="file" name="file" id="file">
                </div>
                <div class="form-group">
                    <label for="name">
                        <div class="labelBox">
                            昵称:
                        </div>
                    </label>
                    <input type="text" name="username" id="name" th:value="${user.username}">
                </div>
                <div class="form-group">
                    <label for="sign">
                        <div class="labelBox">
                            个性签名:
                        </div>
                    </label>
                    <input type="text" name="label" id="sign" th:value="${user.label}">
                </div>
                <div>
                    <label for="age">
                        <div class="labelBox">
                            年龄:
                        </div>
                    </label>
                    <input type="text" name="age" id="age" th:value="${user.age}" step="any">
                </div>
                <div>
                    <label for="address">
                        <div class="labelBox">
                            住址:
                        </div>
                    </label>
                    <input type="text" name="address" id="address" th:value="${user.address}">
                </div>
                <div >
                    <label>
                        <div class="labelBox">
                            性别:
                        </div>
                    </label>
                    <input type="radio" name="sex" id="male" style="width: 20px;height: 10px;" value="男">男
                    <input type="radio" name="sex" id="female" style="width: 20px;height: 10px;" value="女">女
                    <script th:inline="javascript">
                        let sex = [[${user.sex}]]
                        if(sex == '男'){
                            document.getElementById('male').checked = true;
                        } else if(sex == '女'){
                            document.getElementById('female').checked = true;
                        }
                    </script>
                </div>
                <button class="submitBtn">确定修改</button>
            </form>
        </div>
    </div>
    <div id="right-bar" th:replace="~{hot-search::#right-bar}">
        <div id="hot">
            <div class="hot-top">
                <div class="hot-top-content">
                    <p>热搜</p>
                </div>
                <div class="refresh"><i class="iconfont">&#xe661;</i>点击刷新</div>
            </div>
        </div>
        <a class="return-top" href="#">
            <i class="iconfont">&#xea7d;</i>
        </a>
    </div>
</div>
<div class="publishBlogBox hidden" th:fragment="publishBlogBox">
    <div class="publishBlog">
        <p>发布微博</p>
        <i class="iconfont publishCancel">&#xe650;</i>
        <form
                class="blogPubForm"
                enctype="multipart/form-data"
        >
          <textarea
                  name="text"
                  id="publishBlogArea"
                  cols="30"
                  rows="10"
                  placeholder="分享日常,发表看法..."
          ></textarea>
            <div class="imagePreview">
                <div class="imagePreviewContainer"></div>
            </div>
            <div class="imageUpload">
                <button
                        type="button"
                        class="addImageButton"
                >
                    添加图片
                </button>
                <input
                        type="file"
                        id="imageInput"
                        accept="image/*"
                        name="myFiles"
                        style="display: none"
                        multiple="multiple"
                />
            </div>
            <div class="blogBottom">
                <div class="bottomBox">
                    <i class="iconfont">&#xe8ba;</i><span>图片</span>
                    <div id="imageInputs"></div>
                </div>
                <div class="bottomBox">
                    <i class="iconfont">&#xe8b1;</i><span>话题</span>
                    <div>
                        <input name="label" id="label" placeholder="为您的微博添加标签"/>
                        <div class="labelList" style="display:none">
                            <ul class="labelListUl">

                            </ul>
                        </div>
                    </div>
                </div>
                <div class="bottomBox">
                    <i class="iconfont">&#xe7f9;</i><span>类别</span>
                    <div id="categorySelects">
                    </div>
                </div>
            </div>
            <button class="publish">发布</button>
        </form>
    </div>
</div>
</body>
<script
        type="text/javascript"
        src="../../static/js/jquery3.7.1.min.js"
        th:src="@{/static/js/jquery3.7.1.min.js}"
></script>
<script type="text/javascript" th:src="@{/static/js/common.js}" src="../js/common.js"></script>
<script type="text/javascript" th:src="@{/static/customAlertConfirm/customAlertConfirm.js}"
        src="../customAlertConfirm/customAlertConfirm.js"></script>
<script type="text/javascript" th:src="@{/static/js/personalPage-publish.js}" src="../js/personalPage-publish.js"></script>
<script type="text/javascript" th:src="@{/static/js/personalPage-infoChange.js}" src="../js/personalPage-infoChange.js"></script>
<script type="text/javascript"  th:src="@{/static/js/hot-search.js}"></script>
<script th:inline="javascript">
    let result=[[${result}]]
    console.log(result)
    if (result){
        if(result.status===200){
            showCustomAlert('修改成功',true)
        }else if(result.status===2004001){
            showCustomAlert('修改失败',false)
        }else if(result.status===2004002){
            showCustomAlert('头像格式不合法',false)
        }
    }
</script>
</html>